<template>
  <dys-modal :open="open" :width="600" :title="t('文件上传')" :footer="false">
    <component
      :is="draggable ? 'AUploadDragger' : 'AUpload'"
      :accept="accept"
      :disabled="disabled || uploadState.stateList.length"
      :before-upload="beforeUpload"
      :custom-request="customRequest"
      :multiple="multiple"
      :show-upload-list="false"
    >
      <template v-if="draggable">
        <p class="draggable-icon">
          <InboxOutlined></InboxOutlined>
        </p>
        <p>{{ t("单击或拖动文件到此区域进行上传") }}</p>
        <p>
          {{ t("支持单个或批量上传") }}
        </p>
      </template>
      <a-button v-else type="primary" :disabled="disabled">
        <CloudUploadOutlined />{{ t("上传文件") }}
      </a-button>
    </component>
    <a-spin :tip="t('文件读取中...')" :spinning="state.loading">
      <div v-for="item in state.fileList" :key="item.fileId" class="file-item">
        <div class="file-name">
          {{ item.originFileName }}
        </div>
        <div class="operation">
          <EyeOutlined class="operation-item" />
          <CloudDownloadOutlined
            class="operation-item"
            @click="download(item)"
          />
          <a-popconfirm
            :title="t('确定删除?')"
            @confirm="deleteFile(item.fileId)"
          >
            <DeleteOutlined class="operation-item" />
          </a-popconfirm>
        </div>
      </div>
      <div
        v-for="item in uploadState.stateList"
        :key="item.fileMd5"
        class="file-item"
      >
        <div>
          <div class="file-name">{{ item.originFileName }}</div>
          <a-progress
            :percent="item.schedule"
            status="active"
            :format="customFormat"
          />
        </div>
        <div class="operation">
          <PauseCircleOutlined class="operation-item" />
          <PlayCircleOutlined class="operation-item" />
          <DeleteOutlined class="operation-item" />
        </div>
      </div>
      <a-empty
        v-if="!state.fileList.length && !uploadState.stateList.length"
        :description="t('暂无文件')"
      ></a-empty>
    </a-spin>
  </dys-modal>
</template>
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import type { Props as CustomProps } from "../typing";
interface Props extends CustomProps {
  /**弹窗 */
  open: boolean;
}
defineProps<Props>();
const { t } = useI18n();
// 自定义进度文本
const customFormat = (percent: number) => {
  if (percent == 100) {
    return t("请稍后...");
  } else {
    return percent + "%";
  }
};
</script>
<style lang="less" scoped>
.draggable-icon {
  color: @primary-color;
  font-size: 30px;
}
.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  margin: 4px;
  &:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }
}
.operation {
  &-item {
    cursor: pointer;
    margin: 8px;
    font-size: 18px;
    transition: transform 0.3s;
    &:hover {
      transform: scale(1.4);
    }
  }
}
.file-name {
  width: 400px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
